<template>
  <a-modal
    width="70%"
    :visible="isModal"
    :footer="null"
    :maskClosable="false"
    :bodyStyle="{ height: '800px', overflow: 'auto' }"
    forceRender
    destroyOnClose
    @cancel="isModal = false"
  >
   <template slot="title">
      组件配置
      <EchoConfig echo="component" @f_echoChange="s_echoChange"/>
    </template>
    <a-tabs v-if="isModal" default-active-key="1" force-render tabPosition="left">
      <a-tab-pane key="1" tab="厂区模态框">
        <!-- <FactoryTab :key="facKey" ref="FactoryTabRef" /> -->
      </a-tab-pane>
      <a-tab-pane key="2" tab="通用模态框">
        <GeneralTab :key="genKey" ref="GeneralTabRef" />
      </a-tab-pane>
    </a-tabs>
  </a-modal>
</template>
<script>
export default {
  data() {
    return {
      facKey: 1,
      genKey: 999,
      isModal: false,
    }
  },
  created() {},
  methods: {
    // 回显组件变更刷新组件
    s_echoChange() {
      this.facKey ++
      this.genKey ++
      console.log('刷新组件', this.facKey, this.genKey)
    },
    // 父组件初始化
    f_init() {
      // 初始化vuex 表数据的值
      this.$store.dispatch('GETTABLES')
      this.isModal = true
    }
  },
  components: {
    GeneralTab: () => import('@/views/businessAssembly/general/generalTab.vue'),
    FactoryTab: () => import('@/views/businessAssembly/factory/factoryTab.vue'),
    EchoConfig: () => import('@/views/businessAssembly/jsonComponent/base/echoConfig.vue')
  },
}
</script>

<style lang="less" scoped>
/deep/ .contentArea,
/deep/ .stepsArea {
  margin-top: 15px;
  padding: 10px;
  width: 100%;
}
// 右侧内容样式
/deep/ .contentArea {
  // border: 1px solid #eee;
  // background-color: rgb(250, 250, 250);
  height: 500px;
}
// 左侧步骤条样式
/deep/ .stepsArea {
  height: 80%;
}
/deep/ .titleArea {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  width: 100%;

  /deep/ &-label {
    width: 3px;
    height: 17px;
    background-color: #5b79fb;
  }

  /deep/ &-content {
    margin-left: 0.5%;
    font-size: 18px;
    font-family: Source Han Sans CN;
    font-weight: 550;
    color: #232323;
    letter-spacing: 2px;
  }
}
/deep/ .btnBox {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 30px;
  padding-bottom: 50px;
}
</style>
